import { prepareConnection } from '@/db';
import { Article } from '@/db/entity';
import { IArticle } from './api';
import ListItem from '@/components/ListItem';
import { Divider } from 'antd';


interface IProps {
  articles: IArticle[];
}

export async function getServerSideProps() {
  const db =  await prepareConnection();
  const articles = await db.getRepository(Article).find({
    relations: ['user']
  })
  
  return {
    props: {
      articles: JSON.parse(JSON.stringify(articles)) || [],
    }
  }
}

const Home = (props:IProps) => {
  const { articles } = props
  return (
    <div>
      {/* <div className={styles.tags} onClick={handleSelectTag}>
        {tags?.map((tag) => (
          <div
            key={tag?.id}
            data-tagid={tag?.id}
            className={classnames(
              styles.tag,
              selectTag === tag?.id ? styles['active'] : ''
            )}
          >
            {tag?.title}
          </div>
        ))}
      </div> */}
      <div className="content-layout">
        {articles?.map((article) => (
          <>
            <ListItem article={article} />
            {/* <DynamicComponent article={article} /> */}
            <Divider />
          </>
        ))}
      </div>
    </div>
  );
};

export default Home;
